<template>
  <div>
    <el-card style="margin: 20px">
      <el-row :gutter="20">
        <el-col :span="18">
          <el-input
            placeholder="根据用户名搜索"
            style="width: 200px; margin-right: 8px"
            v-model="userInfo"
          ></el-input>
          <el-button size="small" @click="emply">清空</el-button>
          <el-button type="primary" size="small" @click="handelSearch">搜索</el-button>
        </el-col>
        <el-col :span="6" style="text-align: right">
          <el-button
            type="success"
            size="small"
            icon="el-icon-edit"
            @click="handelAdd"
            >新增用户</el-button
          >
        </el-col>
      </el-row>
      <el-alert
        title="共1条记录"
        type="info"
        show-icon
        style="margin-top: 20px"
      >
      </el-alert>
      <el-table style="width: 100%; margin-top: 20px" :data="list">
        <el-table-column label="序号" width="150px" prop="id" align="center">
        </el-table-column>
        <el-table-column label="邮箱" width="200px" prop="email" align="center">
        </el-table-column>
        <el-table-column
          label="联系电话"
          width="200px"
          prop="phone"
          align="center"
        >
        </el-table-column>
        <el-table-column
          label="用户名"
          width="200px"
          prop="username"
          align="center"
        >
        </el-table-column>
        <el-table-column
          label="权限组名称"
          width="200px"
          prop="permission_group_title"
          align="center"
        >
        </el-table-column>
        <el-table-column label="角色" width="150px" prop="role" align="center">
        </el-table-column>
        <el-table-column label="操作" width="150px" align="center">
          <template #default="scope">
            <el-button
            type="primary"
            icon="el-icon-edit"
            circle
            plain
            @click= "handelEdit(scope.row)"
          ></el-button>
          <el-button
            type="danger"
            icon="el-icon-delete"
            circle
            plain
            @click= "del(scope.row)"
          ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        style="margin-top: 20px; text-align: right"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 30, 40]"
        layout="prev, pager, next, sizes,jumper"
        :total="counts"
      >
      </el-pagination>
    </el-card>
    <el-dialog :title="title" :visible.sync="dialogVisible" width="50%">
      <el-form ref="roleRef" label-width="180px" :model="formList" :rules="rules" style="padding-right:200px">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="formList.username"/>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="formList.email"/>
        </el-form-item>
        <el-form-item label="密码" prop="password" v-if="title !=='编辑用户'">
          <el-input v-model="formList.password"/>
        </el-form-item>
        <el-form-item label="角色">
          <el-input v-model="formList.role"/>
        </el-form-item>
        <el-form-item label="权限组名称">
          <el-select placeholder="请选择" v-model="formList.permission_group_id" >
            <el-option
            v-for = "item in simpleList"
            :key = "item.id"
            :label = "item.username"
            :value = "item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="联系电话">
          <el-input v-model="formList.phone"/>
        </el-form-item>
        <el-form-item label="介绍">
          <el-input v-model="formList.introduction" placeholder="Please input" type="textarea"/>
        </el-form-item>
      </el-form>
      <span
        slot="footer"
        class="dialog-footer"
        style="display: block; text-align: center"
      >
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handelDialogVisible"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { list, simple, add, update, remove } from '@/api/base/users'
export default {
  data () {
    return {
      userInfo: '',
      params: {
        page: 1,
        pagesize: 10,
        username: ''
      },
      list: [],
      counts: null,
      pages: null,
      title: '',
      dialogVisible: false,
      form: {
        account: '',
        fullName: '',
        mobile: '',
        permission_group_id: '',
        avatar: '',
        email: '',
        disabled: false
      },
      formList: {
        avatar: '',
        email: '',
        introduction: '',
        password: '',
        permission_group_id: null,
        phone: '',
        role: '',
        username: ''
      },
      simpleList: [],
      rules: {
        username: [{ required: true, message: '用户名不能为空', trigger: 'blur' }],
        email: [{ required: true, message: '邮箱不能为空', trigger: 'blur' }],
        password: [{ required: true, message: '邮箱不能为空', trigger: 'blur' }]
      }
    }
  },
  created () {
    this.getList()
    this.simple()
  },
  methods: {
    handleSizeChange (val) {
      console.log(val, '999')
      this.params.pagesize = val
      this.getList()
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange (val) {
      this.params.page = val
      this.getList()
      console.log(`当前页: ${val}`)
    },
    // 获取用户列表
    async getList () {
      const res = await list(this.params)
      console.log(res)
      this.list = res.data.list
      this.params.page = res.data.page
      this.params.pagesize = res.data.pagesize
      this.counts = res.data.counts
      this.pages = res.data.pages
    },
    // 选择权限
    async simple () {
      const { data } = await simple()
      this.simpleList = data
    },
    // 新增用户
    handelAdd () {
      this.dialogVisible = true
      this.title = '创建用户'
    },

    // 编辑
    handelEdit (val) {
      console.log(val)
      this.title = '编辑用户'
      this.dialogVisible = true
      // this.formList = val

      this.formList.avatar = val.avatar
      this.formList.email = val.email
      this.formList.introduction = val.introduction
      this.formList.permission_group_id = val.permission_group_id
      this.formList.password = val.password
      this.formList.phone = val.phone
      this.formList.role = val.role
      this.formList.username = val.username
      this.formList.id = val.id
      console.log(this.formList)
      this.getList()
    },
    // 点击确定
    async handelDialogVisible () {
      if (this.title === '创建用户') {
        this.$refs.roleRef.validate()
        this.dialogVisible = false
        if (this.formList.permission_group_id) {
          await add(this.formList)
          console.log(this.formList)
          this.getList()
          this.formList = ''
        } else {
          return this.$message.error('输入信息不全')
        }
      } else {
        this.$refs.roleRef.validate()
        this.dialogVisible = false

        await update(this.formList)
        this.getList()
      }
    },
    // 搜索
    async handelSearch () {
      const res = await list({ username: this.userInfo })
      console.log(res)
      this.list = res.data.list
    },
    // 删除
    async del (row) {
      await this.$confirm('此操作将永久删除用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      const res = await remove(row)
      console.log(res)
      this.$message({
        type: 'success',
        message: '成功删除用户!'
      })
      this.getList()
    },
    // 清空
    emply () {
      this.userInfo = ''
      this.getList()
    }

  }
}
</script>

<style scoped lang="scss"></style>
